<template>
  <div>
    <!--lightSpeedIn,flipInX-->
    <a-card v-for="item of tagList" v-bind:key="item.id" class="tag-card-item">
      <div slot="cover" :style="item.style">
        <span @click="blogTagItemClick(item)" class="tag-mouse-hover">
        {{item.tagName}}
        </span>
      </div>
      {{item.description}}
    </a-card>
  </div>
</template>

<script>
  import GeoPattern from 'geopattern'
  import { mapGetters, mapActions } from 'vuex'

  export default {
    name: 'BlogTagTop5',
    data: function() {
      return {}
    },
    computed: {
      ...mapGetters(['blogTags']),
      tagList: function() {
        // 深拷贝 -> 排序 -> 过滤top5
        var newBlogTags = _.cloneDeep(this.blogTags)
        newBlogTags = newBlogTags.splice(0, 5)
        for (let item of newBlogTags) {
          item['style'] = {
            height: '120px',
            'text-align': 'center',
            'font-family': 'Microsoft YaHei,"Helvetica Neue",Helvetica,"Segoe UI",Arial,freesans,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"',
            'font-size': '24px',
            'vertical-align': 'middle',
            'border-radius': '4px',
            'padding-top': '40px',
            'background-image': GeoPattern.generate(item.tagName).toDataUrl()
          }
        }
        return newBlogTags
      }
    },
    created() {
    },
    methods: {
      ...mapActions(['setBlogPageData']),
      /**
       * 博客标签点击
       */
      blogTagItemClick(item) {
        this.setBlogPageData({ current: 1, size: 6, tagId: item.tagId })
        document.getElementById('blogCarousel').scrollIntoView(true, {
          behavior: 'smooth',
          block: 'start',
          inline: 'nearest'
        })
      }
    }
  }
</script>

<style scoped>
  .tag-card-item {
    /*box-shadow: 2px 0px 10px rgba(0, 0, 0, 0.2);*/
    margin-top: 10px;
    text-align: center;
    font-weight: bold;
  }

  .tag-mouse-hover:hover {
    color: white;
    cursor: pointer;
  }

</style>